<template>
    <div class="video_view">
        <video :src="src" class="video"></video>
        <div class="mask" @click.stop="submit">
            <img src="@/assets/image/play.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    props: {
        src: {
            type: String,
            default: ""
        }
    },
    methods: {
        submit() {
            window.top.open(this.src)
        }
    }
}
</script>

<style scoped lang="scss">
$width: 161px;
$height: 214px;

.video_view {
    width: $width;
    height: $height;
    position: relative;

    .video {
        width: $width;
        height: $height;
    }

    .mask {
        width: $width;
        height: $height;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99;

        img {
            width: 36px;
            height: 36px;
        }
    }
}
</style>